<template>
  <div class="wrap-table user-p1">
    <div class="headerTop_ukl">
      <ul class="clearfix">
        <li>
          <p class="p1">
            <img
              src="../../assets/images/icon_yanjiuduixiang.png"
              alt=""
            /><span>研究对象</span>
          </p>
          <p class="p3">{{ userBasic.Surname }}({{ userBasic.ResearchNo }})</p>
        </li>
        <li>
          <p class="p1">
            <img src="../../assets/images/icon_ganyuzu.png" alt="" />{{
              userBasic.GroupType | GroupType
            }}
          </p>
          <p class="p3" v-if="userBasic.Period != '3'">
            <span v-if="userBasic.GroupType == 1">{{
              userBasic.IntensityOfIntervention | IntensityOfIntervention
            }}</span>
          </p>
          <p class="p3" v-else>
            <span v-if="userBasic.GroupType == 1">{{
              userBasic.ChildIntensityOfIntervention | IntensityOfIntervention
            }}</span>
          </p>
        </li>
        <li>
          <p class="p1">
            <img src="../../assets/images/icon_huaiyunqi.png" alt="" />{{
              userBasic.Period | Period
            }}
          </p>
          <p class="p3">
            <span v-if="userBasic.Period == 2"
              >预产期：{{ userBasic.ExpectedDate }},{{
                userBasic.PregnancyWeek
              }}</span
            >
          </p>
          <p class="p3">
            <span v-if="userBasic.Period == 3"
              >出生日期：{{ userBasic.ChildBirthDate }},{{
                userBasic.ChildAge
              }}, {{ userBasic.ChildSex | ChildSex }}
            </span>
          </p>
          <p class="p3">
            <span v-if="userBasic.Period == 4"
              >出生日期：{{ userBasic.ChildBirthDate }},{{
                getChildAge2(userBasic.ChildBirthDate)
              }}, {{ userBasic.ChildSex | ChildSex }}
            </span>
          </p>
        </li>
      </ul>
    </div>
    <!---->
    <template>
      <el-table
        :data="tableData"
        border
        v-loading="loading"
        height="500"
        element-loading-text="加载中"
        style="width: 100%"
        :default-sort="{ prop: 'StartDate', order: 'descending' }"
      >
        <el-table-column
          prop="Period"
          align="center"
          :formatter="PeriodFilter"
          label="研究阶段"
          min-width="200"
        >
        </el-table-column>
        <el-table-column
          prop="StartDate"
          label="填写时间-起始"
          sortable
          align="center"
          min-width="200"
        >
        </el-table-column>
        <el-table-column
          prop="LastDate"
          label="填写时间-结束"
          align="center"
          min-width="200"
        >
        </el-table-column>
        <el-table-column
          prop="FillInDate"
          label="实际填写时间"
          align="center"
          min-width="200"
        >
        </el-table-column>
        <el-table-column
          min-width="80"
          align="center"
          fixed="right"
          label="操作"
        >
          <template slot-scope="scope">
            <el-button
              size="small"
              type="text"
              label="查看"
              @click="handleEdit(scope.$index, scope.row)"
              >查看</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </template>
    <!--分页-->
    <div class="block mg-20-auto">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="pageId"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <el-dialog
      title="生活方式问卷"
      :visible.sync="dialogForm3"
      :append-to-body="true"
      top="0"
      width="60%"
      :close-on-click-modal="false"
    >
      <div class="newbox" v-for="(ts, tindex) in table3" :key="tindex">
        <table>
          <tr v-if="tindex == 0" style="background: rgba(149, 242, 4, 0.5)">
            <td colspan="4">Part1：{{ ts.QuestionName }}</td>
          </tr>
          <tr v-if="tindex == 0">
            <td colspan="4">
              <div
                v-if="ts.FillState == 1"
                style="display: flex; align-items: center"
              >
                <el-button @click="handleDetail(ts,1)" size="small" type="success">查看详情</el-button>
                <p style="margin-left: 30px">
                  填写时间：<span>{{ ts.FillTime }}</span>
                </p>
                <el-button @click="handleDetail(ts,2)" style="margin-left: auto" size="small" type="warning"
                  >查看报告</el-button
                >
              </div>

              <el-button v-else size="small" @click="handleDetail(ts,1)" type="primary">去填写</el-button>
            </td>
          </tr>
          <tr v-if="tindex == 1" style="background: rgba(149, 242, 4, 0.5)">
            <td colspan="4">Part2：育儿现况表</td>
          </tr>
          <tr v-if="tindex >= 1">
            <td width="200">
              {{ ts.QuestionName }}
            </td>
            <td width="350">
              <div
                v-if="ts.FillState == 1"
              >
                <el-button size="small"  @click="handleDetail(ts,1)" type="success">查看详情</el-button>
                <p style="margin-top: 10px">
                  填写时间：<span>{{ ts.FillTime }}</span>
                </p>
              </div>
              <el-button v-if="ts.OpenState == '1' && ts.FillState != 1" size="small"  @click="handleDetail(ts,1)" type="primary">去填写</el-button>
            </td>
            <td width="120">
              <el-button v-if="ts.FillState == 1" @click="handleDetail(ts,2)" size="small">查看报告</el-button>
            </td>
            <td width="200">
              <div style="text-align:left;">
                <el-switch
                  v-model="ts.OpenState"
                  style="margin:0 auto"
                  active-text="开启"
                  :disabled="ts.FillState == 1"
                  inactive-text="关闭"
                  @change="(e) =>changeOpen(e,ts)"
                  active-value="1"
                  inactive-value="0"
                >
                </el-switch>
                <p v-if="ts.OpenTime" style="margin-top: 10px">开启日期：{{ts.OpenTime}}</p>
              </div>
            </td>
          </tr>
        </table>
      </div>
    </el-dialog>
    <el-dialog
      title="查看问卷"
      :visible.sync="dialogForm2"
      :append-to-body="true"
      top="0"
      width="60%"
      :close-on-click-modal="false"
    >
      <div
        style="
          width: auto;
          display: inline-block;
          padding-top: 10px;
          padding-left: 30px;
        "
      >
        {{ Period | Period }}问卷，填写时间{{ FillInDate }}
      </div>
      <div>
        <div class="details" v-show="step == 1">
          <div class="item">
            <h5 class="h5">以下行为您的孩子多久会有一次。</h5>
            <div v-for="(option, oIndex) in jsonArray" :key="oIndex">
              <div class="title">
                <span>{{ option[0].TitleType }}</span>
              </div>
              <div
                class="content"
                v-for="(item, index) in option"
                :key="item.SYS_ID + index"
              >
                <div class="row">
                  <div
                    class="required"
                    :data-oIndex="oIndex"
                    :data-Index="index"
                  >
                    *
                  </div>
                  <div class="question">
                    <strong>{{
                      item.SortIndex + "." + item.QuestionTitle
                    }}</strong>
                  </div>
                </div>
                <div class="bbox">
                  <div
                    class="label"
                    @click="clickRadio($event, oIndex, index, item, 1)"
                  >
                    <label>
                      <input type="radio" class="hidden" />
                      <span
                        class="custorm-radiof"
                        :class="{ active: parseInt(item.Answer) == 1 }"
                      ></span>
                      {{ item.Item1 }}
                    </label>
                  </div>
                  <div
                    class="label"
                    @click="clickRadio($event, oIndex, index, item, 2)"
                  >
                    <label>
                      <input type="radio" class="hidden" />
                      <span
                        class="custorm-radiof"
                        :class="{ active: parseInt(item.Answer) == 2 }"
                      ></span>
                      {{ item.Item2 }}
                    </label>
                  </div>
                  <div
                    class="label"
                    @click="clickRadio($event, oIndex, index, item, 3)"
                  >
                    <label>
                      <input type="radio" class="hidden" />
                      <span
                        class="custorm-radiof"
                        :class="{ active: parseInt(item.Answer) == 3 }"
                      ></span>
                      {{ item.Item3 }}
                    </label>
                  </div>
                  <div
                    class="label"
                    @click="clickRadio($event, oIndex, index, item, 4)"
                  >
                    <label>
                      <input type="radio" class="hidden" />
                      <span
                        class="custorm-radiof"
                        :class="{ active: parseInt(item.Answer) == 4 }"
                      ></span>
                      {{ item.Item4 }}
                    </label>
                  </div>
                  <div
                    class="label"
                    @click="clickRadio($event, oIndex, index, item, 5)"
                  >
                    <label>
                      <input type="radio" class="hidden" />
                      <span
                        class="custorm-radiof"
                        :class="{ active: parseInt(item.Answer) == 5 }"
                      ></span>
                      {{ item.Item5 }}
                    </label>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div style="text-align: center">
            <el-button
              @click="nextStep1"
              style="margin: 20px auto"
              size="small"
              v-show="step == 1"
              type="success"
              >保存</el-button
            >
          </div>
        </div>
        <div class="secContent" v-show="step == 2">
          <p class="ptop">
            {{ ptop }}
          </p>
          <div class="colorCon">
            <span class="color1">首要解决</span>
            <span class="color2"></span>
            <span class="color3">改进</span>
            <span class="color4"></span>
            <span class="color5">表现不错</span>
          </div>
          <div class="Tdiv" v-for="(tItem, tIndex) in Tdata" :key="tIndex">
            <div class="Ttop">
              <p
                class="p1"
                :class="{
                  color1: parseFloat(tItem[0].Average) < 1.9,
                  color2:
                    parseFloat(tItem[0].Average) >= 1.9 &&
                    parseFloat(tItem[0].Average) < 2.9,
                  color3:
                    parseFloat(tItem[0].Average) >= 2.9 &&
                    parseFloat(tItem[0].Average) < 3.9,
                  color4:
                    parseFloat(tItem[0].Average) >= 3.9 &&
                    parseFloat(tItem[0].Average) < 4.9,
                  color5: parseFloat(tItem[0].Average) >= 4.9,
                }"
              >
                {{ tItem[0].TitleType
                }}<span>（评分 = {{ tItem[0].Average }}）</span>
              </p>
            </div>
            <div class="Tcon">
              <div class="Tleft">
                <div
                  class="Trow"
                  v-for="(jitem, jIndex) in tItem"
                  :key="jIndex"
                >
                  <p>{{ jitem.SortIndex + "." + jitem.QuestionTitle }}</p>
                  <span :class="colorFunc(jitem.Answer)">{{
                    jitem.Answer
                  }}</span>
                </div>
              </div>
              <!-- <div class="Tright">
                <div @click="clickStep2($event, tIndex, 1, tItem)">
                  <label style="border: none">
                    <input type="radio" class="hidden" />
                    <span
                      class="custorm-radiof"
                      :class="{ active: activeType == tIndex }"
                    ></span>
                  </label>
                </div>
              </div> -->
            </div>
          </div>
          <!-- <div style="text-align: center">
            <el-button
              style="margin: 20px auto"
              @click="nextStep2"
              type="success"
              v-show="step == 2"
            >
              保存
            </el-button>
          </div> -->
        </div>
      </div>
    </el-dialog>
    <!--查看-->
    <el-dialog
      title="查看问卷"
      :visible.sync="dialogForm1"
      :append-to-body="true"
      top="0"
      width="90%"
      :close-on-click-modal="false"
    >
      <ul
        class="clearfix user-pi-ul"
        style="max-width: 300px; display: inline-block; margin-bottom: 30px"
      >
        <li>
          <el-select
            v-model="changeVal"
            placeholder="请选择"
            @change="selectChange"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </li>
      </ul>
      <div
        style="
          width: auto;
          display: inline-block;
          padding-top: 10px;
          padding-left: 30px;
        "
      >
        {{ Period | Period }}问卷，填写时间{{ FillInDate }}
      </div>
      <template>
        <el-table
          :data="tableData1"
          border
          v-loading="loading1"
          height="auto"
          element-loading-text="加载中"
          style="width: 100%"
        >
          <el-table-column align="center" label="编号" width="50">
            <template slot-scope="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column
            prop="QuestionnaireTitleA"
            label="a.采取以下行为的频率"
            align="left"
            header-align="center"
            min-width="200"
          >
          </el-table-column>
          <el-table-column label="答案" align="center" min-width="100">
            <template slot-scope="scope">
              <div v-if="scope.row.QuestionnaireTypeA == '1'">
                <el-select
                  v-model="scope.row.AnswerA"
                  placeholder="请选择"
                  @change="
                    changeAnswer(
                      scope.row.SYS_IDA,
                      scope.row.ValueTypeA,
                      scope.row.AnswerA,
                      scope.row.CreateTimeA,
                      scope.row.MyQuestionnaireIdA,
                      scope.row.QuestionnaireTemplateIdA,
                      scope.row.QuestionnaireTypeA,
                      scope.row.QuestionnaireTitleA,
                      '1',
                      scope.row
                    )
                  "
                >
                  <el-option
                    :value="scope.row.FrequencyRule1"
                    :label="scope.row.FrequencyRule1"
                  >
                  </el-option>
                  <el-option
                    :value="scope.row.FrequencyRule2"
                    :label="scope.row.FrequencyRule2"
                  >
                  </el-option>
                  <el-option
                    :value="scope.row.FrequencyRule3"
                    :label="scope.row.FrequencyRule3"
                  >
                  </el-option>
                  <el-option
                    :value="scope.row.FrequencyRule4"
                    :label="scope.row.FrequencyRule4"
                  >
                  </el-option>
                  <el-option
                    :value="scope.row.FrequencyRule5"
                    :label="scope.row.FrequencyRule5"
                  >
                  </el-option>
                </el-select>
              </div>
              <div v-else>
                <el-select
                  v-model="scope.row.AnswerA"
                  placeholder="请选择"
                  @change="
                    changeAnswer(
                      scope.row.SYS_IDA,
                      scope.row.ValueTypeA,
                      scope.row.AnswerA,
                      scope.row.CreateTimeA,
                      scope.row.MyQuestionnaireIdA,
                      scope.row.QuestionnaireTemplateIdA,
                      scope.row.QuestionnaireTypeA,
                      scope.row.QuestionnaireTitleA,
                      '2',
                      scope.row
                    )
                  "
                >
                  <el-option
                    :value="scope.row.FrequencyRule5"
                    :label="scope.row.FrequencyRule1"
                  >
                  </el-option>
                  <el-option
                    :value="scope.row.FrequencyRule5"
                    :label="scope.row.FrequencyRule2"
                  >
                  </el-option>
                  <el-option
                    :value="scope.row.FrequencyRule5"
                    :label="scope.row.FrequencyRule3"
                  >
                  </el-option>
                  <el-option
                    :value="scope.row.FrequencyRule5"
                    :label="scope.row.FrequencyRule4"
                  >
                  </el-option>
                  <el-option
                    :value="scope.row.FrequencyRule5"
                    :label="scope.row.FrequencyRule5"
                  >
                  </el-option>
                </el-select>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="ScoreA"
            label="分值"
            align="center"
            min-width="60"
          >
            <template slot-scope="scope">
              <span
                :class="{
                  redspan: scope.row.ScoreA == 1,
                  twospan: scope.row.ScoreA == 2,
                  thrspan: scope.row.ScoreA == 3,
                  fourspan: scope.row.ScoreA == 4,
                  grespan: scope.row.ScoreA == 5,
                }"
                >{{ scope.row | ScoreA }}</span
              >
            </template>
          </el-table-column>
          <el-table-column
            prop="QuestionnaireTitleB"
            label="b.坚持这种行为的重要程度"
            align="left"
            header-align="center"
            min-width="200"
          >
          </el-table-column>
          <el-table-column label="答案" align="center" min-width="100">
            <template slot-scope="scope">
              <el-select
                v-if="scope.row.QuestionnaireTypeB == 1"
                v-model="scope.row.AnswerB"
                placeholder="请选择"
                @change="
                  changeAnswer1(
                    scope.row.SYS_IDB,
                    scope.row.ValueTypeB,
                    scope.row.AnswerB,
                    scope.row.CreateTimeB,
                    scope.row.MyQuestionnaireIdB,
                    scope.row.QuestionnaireTemplateIdB,
                    scope.row.QuestionnaireTypeB,
                    scope.row.QuestionnaireTitleB,
                    scope.row.AnswerB
                  )
                "
              >
                <el-option
                  v-for="item in options1"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
              <el-select
                v-else
                v-model="scope.row.AnswerB"
                placeholder="请选择"
                @change="
                  changeAnswer1(
                    scope.row.SYS_IDB,
                    scope.row.ValueTypeB,
                    scope.row.AnswerB,
                    scope.row.CreateTimeB,
                    scope.row.MyQuestionnaireIdB,
                    scope.row.QuestionnaireTemplateIdB,
                    scope.row.QuestionnaireTypeB,
                    scope.row.QuestionnaireTitleB,
                    scope.row.AnswerB
                  )
                "
              >
                <el-option
                  v-for="item in options2"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column
            prop="ScoreB"
            label="分值"
            align="center"
            min-width="60"
          >
            <template slot-scope="scope">
              <span
                :class="{
                  redspan: scope.row.ScoreB == 1,
                  twospan: scope.row.ScoreB == 2,
                  thrspan: scope.row.ScoreB == 3,
                  fourspan: scope.row.ScoreB == 4,
                  grespan: scope.row.ScoreB == 5,
                }"
                >{{ scope.row | ScoreB }}</span
              >
            </template>
          </el-table-column>
        </el-table>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import { getChildAge2 } from "@/utils/index";
import { filterPeriod, filterIntensityOfIntervention } from "@/utils/localDic";
export default {
  name: "userP1",
  data() {
    return {
      tableData: [],
      jsonArray: [],
      step: 1,
      Tdata: [],
      activeType: null,
      titleType: null,
      stepIndex: null,
      itemArr: ["null", "营养", "体育活动", "视屏时间", "睡眠"],
      ptop: "下面的报告显示了需要改进的领域，以促进您孩子养成健康行为。您可以看到可能需要关注的区域 - 红色表示需要改进的优先区域，其次是橙色，黄色，浅绿色，以深绿色结尾，表示最佳习惯。请选择您最想解决的行为问题，以便进行下一步评价。",
      pageId: 1,
      total: null,
      loading: false,
      pageSize: 10,
      dialogForm1: false,
      innerVisible: false,
      dialogForm3: false,
      table3: [],
      tableData1: [],
      pageId1: 1,
      total1: null,
      loading1: true,
      pageSize1: 10,
      Period: "",
      maxHeight: "",
      formx: {
        a: "",
        b: null,
        c: 3,
      },
      topMAX: "5",
      itemType: "",
      sysId: "",
      mobile: "",
      researchNo: "",
      userBasic: {
        Surname: "",
        ResearchNo: "",
        ExpectedDate: "",
        Period: "",
        IntensityOfIntervention: "",
        GroupType: "",
      },
      changeVal: "2",
      FillInDate: "",
      options2: [
        { value: "一点也不重要", label: "一点也不重要" },
        { value: "有一点重要", label: "有一点重要" },
        { value: "比较重要", label: "比较重要" },
        { value: "很重要", label: "很重要" },
        { value: "极其重要", label: "极其重要" },
      ],
      options1: [
        { value: "从不", label: "从不" },
        { value: "很少", label: "很少" },
        { value: "有时", label: "有时" },
        { value: "经常", label: "经常" },
        { value: "总是", label: "总是" },
      ],
      options: [
        { value: "2", label: "智能排序" },
        { value: "1", label: "按编号排序" },
      ],
      options1Other: [
        { value: "0月", label: "0月" },
        { value: "1个月", label: "1个月" },
        { value: "2~3个月", label: "2~3个月" },
        { value: "4~5个月", label: "4~5个月" },
        { value: "6个月", label: "6个月" },
        { value: "我还不知道", label: "我还不知道" },
      ],
      PeriodFilter(row, column, cellValue, index) {
        return filterPeriod(cellValue);
      },
      AnswerFilter(row, column, cellValue, index) {
        return "测试数据需修改";
      },
      TypeFilter(row, column, cellValue, index) {
        return cellValue == 1 ? "a" : "b";
      },
      rowlist: {},
      dialogForm2: false,
      rowobj:{

      }
    };
  },
  components: {},
  props: {
    changeIndex: {
      type: String,
    },
  },
  beforeMount: function () {
    let that = this;
    let appHeight = $(window).height();
    let autoheight = appHeight - 300 + "px";
    that.maxHeight = autoheight;
  },
  watch: {
    changeIndex: function (index) {
      if (index == "3") {
        this.getList();
      }
    },
  },
  computed: {
    ...mapGetters(["resechObj"]),
    LASTTIME: function () {
      let dateAlary = new Date(this.userBasic.ExpectedDate);
      return new Date(
        dateForm(
          dateAlary.setMonth(dateAlary.getMonth() - 9, dateAlary.getDate() - 7)
        )
      );
    },
    yunzhou: function () {
      return parseInt(WeeksBetw(new Date(), this.LASTTIME) / 7);
    },
    yuntianshu: function () {
      return parseInt(WeeksBetw(new Date(), this.LASTTIME) % 7);
    },
    birthWeek() {
      return parseInt(
        WeeksBetw(new Date(), new Date(this.userBasic.ChildBirthDate)) / 7
      );
    },
    birthDay() {
      return parseInt(
        WeeksBetw(new Date(), new Date(this.userBasic.ChildBirthDate)) % 7
      );
    },
  },
  created() {},
  methods: {
    changeOpen(e,item){
      this
        .service({
          url: "/ChildHabitQuestion/OpenQuestion",
          method: "post",
          params: {
            questionId: this.rowlist.SYS_ID,
            questionType: item.QuestionType,
            openState: e,
          },
        })
        .then((response) => {
         this
          .service({
            url: "/ChildHabitQuestion/GetQuestionMain",
            method: "get",
            params: {
              questionId: this.rowlist.SYS_ID,
              apiType: "web",
            },
          })
          .then((response) => {
            console.log(response);
            this.table3 = response.dtData;
          })
          .catch((data) => {});
        })
        .catch((data) => {});
    },
    getChildAge2(val) {
      //获取儿童期2年龄
      return val && getChildAge2(val);
    },
    handleDetail(item,index){
      this.rowobj = item
      if(index == 1){  //查看详情
        this.step = 1
        this.getQuestion(item.QuestionType);
        this.dialogForm2 = true
      }
      else if(index == 2){  //查看报告
        this.step = 2
         this.getReport(item.QuestionType)
         this.dialogForm2 = true
      }
      console.log(item)
    },
    nextStep2: function () {
      var that = this;
      if (!this.stepIndex) {
        this.$message({
          message: "请选择您最想解决的行为问题",
          type: "info",
        });
        return;
      }
      that
        .service({
          url: "/ChildHabitQuestion/SaveQuestionPoint",
          method: "post",
          params: {
            questionId: that.rowlist.SYS_ID,
            questionType: this.rowobj.QuestionType,
            titleType: that.titleType,
          },
        })
        .then((response) => {
            this.dialogForm2 = false
            this.dialogForm3 = false
        })
        .catch((data) => {});
    },
    clickStep2(e, oindex, jindex, item) {
      e.preventDefault();
      this.activeType = oindex;
      this.titleType = item[0].TitleType;
      if (this.step == 2) {
        var index = this.itemArr.findIndex(function (u) {
          return item[0].TitleType == u;
        });
        this.stepIndex = "2" + index;
      }
    },
    colorFunc(val) {
      if (parseFloat(val) < 1.9) {
        return "color1";
      } else if (parseFloat(val) < 2.9 && parseFloat(val) >= 1.9) {
        return "color2";
      } else if (parseFloat(val) < 3.9 && parseFloat(val) >= 2.9) {
        return "color3";
      } else if (parseFloat(val) < 4.9 && parseFloat(val) >= 3.9) {
        return "color4";
      } else if (parseFloat(val) >= 4.9) {
        return "color5";
      }
    },
    handleSizeChange(val) {
      //条数改变
      this.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      //页数改变
      this.pageId = val;
      this.getList();
    },
    sortMethod: function (a, b) {},

    async handleEdit(index, row) {
      //查看
      console.log(row);
      let that = this;
      that.FillInDate = row.FillInDate;
      that.Period = row.Period;
      that.rowlist = row;
      if (that.Period == "4") {
        // this.step = 1;
        // this.activeType = null;
        // this.titleType = null;
        // this.stepIndex = null;
        // this.getQuestion("11");
        that
          .service({
            url: "/ChildHabitQuestion/GetQuestionMain",
            method: "get",
            params: {
              questionId: row.SYS_ID,
              apiType: "web",
            },
          })
          .then((response) => {
            console.log(response);
            that.table3 = response.dtData;
            that.dialogForm3 = true;
          })
          .catch((data) => {});
      } else {
        that.loading1 = true;
        await that.getList1(row);

        that.dialogForm1 = true;
      }
    },
    nextStep1() {
      var _this = this;
      var doms = document.querySelectorAll(".required");
      var onOff = false;
      for (var i = 0; i < doms.length; i++) {
        if (
          !this.jsonArray[doms[i].getAttribute("data-oIndex")][
            doms[i].getAttribute("data-Index")
          ].Answer
        ) {
          onOff = true;
          this.$message({
            message: "请填写完整",
            type: "info",
          });
          return false;
        }
      }
      if (onOff) return false;
      var arr = this.jsonArray.flat();
      var dataArr = [];
      arr.map(function (item) {
        dataArr.push({
          ResearchObjectId: _this.sysId,
          QuestionId: _this.rowlist.SYS_ID,
          QuestionItemId: item.SYS_ID,
          Answer: item.Answer,
        });
      });
      _this
        .service({
          url: "/ChildHabitQuestion/SaveQuestionAnswer",
          method: "post",
          data: {
            json: JSON.stringify(dataArr),
          },
        })
        .then((response) => {
          _this
          .service({
            url: "/ChildHabitQuestion/GetQuestionMain",
            method: "get",
            params: {
              questionId: _this.rowlist.SYS_ID,
              apiType: "web",
            },
          })
          .then((es) => {
            _this.dialogForm2 = false
            _this.table3 = es.dtData;
          })
          .catch((data) => {});
        })
        .catch((data) => {});
    },
    clickRadio(e, oindex, index, item, value) {
      e.preventDefault();
      this.$set(this.jsonArray[oindex][index], "Answer", value);
    },
    getReport(questionType) {
      var that = this;
      this.service({
        url: "/ChildHabitQuestion/GetReport",
        method: "get",
        params: {
          questionId: this.rowlist.SYS_ID,
          questionType: questionType,
        },
      })
        .then((response) => {
          that.Tdata = response.dtData;
          console.log(that.Tdata)
          //if (that.FillInDate) {
          that.Tdata.map(function (item, index) {
            item.map(function (u) {
              if (u.IsPoint == "1") {
                that.activeType = index;
                that.titleType = item.titleType
              }
            });
          });
          //}
        })
        .catch((data) => {});
    },
    getQuestion(questionType) {
      this.service({
        url: "/ChildHabitQuestion/GetQuestionItem",
        method: "get",
        params: {
          questionId: this.rowlist.SYS_ID,
          questionType: questionType,
        },
      })
        .then((response) => {
          var obj = {};
          for (var i = 0; i < response.dtData.length; i++) {
            if (!obj[response.dtData[i].TitleType]) {
              obj[response.dtData[i].TitleType] = [];
              obj[response.dtData[i].TitleType].push(response.dtData[i]);
            } else {
              obj[response.dtData[i].TitleType].push(response.dtData[i]);
            }
          }
          this.jsonArray = Object.values(obj);
          console.log(response);
        })
        .catch((data) => {});
    },
    changeAnswer1: function (
      SYS_ID,
      ValueType,
      val,
      CreateTime,
      MyQuestionnaireId,
      QuestionnaireTemplateId,
      QuestionnaireType,
      QuestionnaireTitle,
      Answer,
      other
    ) {
      //编辑答案
      let that = this;
      this.$confirm("您是否要修改研究对象问卷答案？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let row = {
            SYS_ID: SYS_ID,
            CreateTime: CreateTime,
            MyQuestionnaireId: MyQuestionnaireId,
            QuestionnaireTemplateId: QuestionnaireTemplateId,
            QuestionnaireType: QuestionnaireType,
            QuestionnaireTitle: QuestionnaireTitle,
            ValueType: ValueType,
            Answer: Answer,
            Score: 0,
          };
          let strArr = [];
          strArr = [
            "一点不重要",
            "有一点重要",
            "比较重要",
            "很重要",
            "极其重要",
          ];
          let scorePL = strArr.indexOf(val);
          row.AnswerIndex = scorePL + 1;
          console.log(scorePL);
          let arrays = [];
          if (ValueType == 2) {
            row.Score = 5 - scorePL;
          } else {
            row.Score = scorePL + 1;
          }
          arrays.push(row);
          that
            .service({
              url: "/ResearchObject/SaveMyQuestionnaireDetail",
              method: "post",
              data: {
                ListQuestionnaireDetailObj: arrays,
              },
            })
            .then((response) => {
              that.getList1(that.rowlist);
            })
            .catch((data) => {});
        })
        .catch(() => {
          that.getList1(that.rowlist);
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    changeAnswer: function (
      SYS_ID,
      ValueType,
      val,
      CreateTime,
      MyQuestionnaireId,
      QuestionnaireTemplateId,
      QuestionnaireType,
      QuestionnaireTitle,
      Answer,
      scope
    ) {
      //编辑答案
      let that = this;
      this.$confirm("您是否要修改研究对象问卷答案？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let row = {
            SYS_ID: SYS_ID,
            CreateTime: CreateTime,
            MyQuestionnaireId: MyQuestionnaireId,
            QuestionnaireTemplateId: QuestionnaireTemplateId,
            QuestionnaireType: QuestionnaireType,
            QuestionnaireTitle: QuestionnaireTitle,
            ValueType: ValueType,
            Answer: val,
            Score: 0,
          };
          let strArr = [];
          if (scope.QuestionnaireTitleA.indexOf("母乳喂养多长时间") > -1) {
            strArr = [
              "不适用，不采取母乳喂养",
              "一个月",
              "2-3个月",
              "4-5个月",
              "至少6个月",
            ];
          } else if (
            scope.QuestionnaireTitleA.indexOf("打算纯母乳喂养宝宝至几个月") > -1
          ) {
            strArr = ["0 月", "1 月", "2-3 月", "4-5 月", "6 月"];
          } else {
            strArr = ["从不", "很少", "有时", "经常", "总是"];
          }
          let scorePL = strArr.indexOf(val);
          row.AnswerIndex = scorePL + 1;
          let arrays = [];
          if (ValueType == "1") {
            row.Score = scorePL + 1;
          } else {
            row.Score = 5 - scorePL;
          }
          console.log(row.Score);
          arrays.push(row);
          that
            .service({
              url: "/ResearchObject/SaveMyQuestionnaireDetail",
              method: "post",
              data: {
                ListQuestionnaireDetailObj: arrays,
              },
            })
            .then((response) => {
              that.getList1(that.rowlist);
            })
            .catch((data) => {});
        })
        .catch(() => {
          that.getList1(that.rowlist);
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    selectChange: function (val) {
      //选择显示模式
      this.loading1 = true;
      this.getList1(this.rowlist);
    },
    getList: function () {
      //获取一级信息列表
      let that = this;
      that.userBasic = "";
      if (that.resechObj.mobile || that.resechObj.researchNo) {
        that.sysId = "";
        that.mobile = that.resechObj.mobile;
        that.researchNo = that.resechObj.researchNo;
      }
      that
        .service({
          url: "/ResearchObject/GetParticipantDetail",
          method: "get",
          params: {
            itemType: "4",
            sysId: "",
            period: "",
            researchObjectId: that.sysId,
            mobile: that.mobile,
            researchNo: that.researchNo,
            pageCount: that.pageId - 1,
            pageSize: that.pageSize,
          },
        })
        .then((response) => {
          response.dtData.dtBasic[0]
            ? (that.userBasic = response.dtData.dtBasic[0])
            : "";
          that.tableData = response.dtData.dtQuestionnaire;
          that.total = parseInt(response.dtData.dtQuestionnaire[0].TotalCount);
        })
        .catch((data) => {});
    },
    async getList1(row) {
      //获取详情
      let that = this;
      that.loading1 = true;
      that.total1 = null;
      try {
        let response = await that.service({
          url: "/ResearchObject/GetMyQuestionnaireDetail",
          method: "get",
          params: {
            myQuestionnaireId: row.SYS_ID,
            sortType: that.changeVal,
          },
        });
        response.dtData.map((val) => {
          val.AnswerIndexA ? (val.AnswerIndexA += "") : "";
          val.AnswerIndexB ? (val.AnswerIndexB += "") : "";
        });
        that.tableData1 = response.dtData;
        console.log(this.tableData1);
        setTimeout(function () {
          that.loading1 = false;
        }, 1000);
      } catch (e) {
        that.loading1 = false;
      }
    },
  },
  mounted: function () {
    let that = this;
    that.sysId = that.$route.query.id;
    that.mobile = that.$route.query.mobile;
    that.researchNo = that.$route.query.researchNo;
    that.getList();
  },
  filters: {
    ScoreA: function (row) {
      if (!row.AnswerA) {
        return;
      }
      if (row.ValueTypeA == "1") {
        row.ScoreA = row.AnswerIndexA;
        row.Score = row.AnswerIndexA;
      } else {
        row.ScoreA = 6 - parseInt(row.AnswerIndexA);
        row.Score = 6 - parseInt(row.AnswerIndexA);
      }
      return row.Score;
    },
    ScoreB: function (row) {
      if (!row.AnswerB) {
        return;
      }
      if (row.ValueTypeB == "1") {
        row.ScoreB = row.AnswerIndexB;
        row.Score = row.AnswerIndexB;
      } else {
        row.ScoreB = 6 - parseInt(row.AnswerIndexB);
        row.Score = 6 - parseInt(row.AnswerIndexB);
      }
      return row.Score;
    },
    GroupType: function (val) {
      if (val == "" || val == undefined) {
        return "";
      }
      return val == "1" ? "A" : "B";
    },
    IntensityOfIntervention: function (val) {
      return filterIntensityOfIntervention(val);
    },
    Period: function (val) {
      return filterPeriod(val);
    },
    ChildSex(val) {
      return val == "1" ? "男" : val == "2" ? "女" : "未知";
    },
  },
};
function addZero(s) {
  return s < 10 ? "0" + s : s;
}

function dateForm(data) {
  //日期格式化
  return (
    new Date(data).getFullYear() +
    "-" +
    addZero(new Date(data).getMonth() + 1) +
    "-" +
    addZero(new Date(data).getDate())
  );
}
function WeeksBetw(date1, date2) {
  //计算日期之间相差得天数
  var _dt1 = new Date(date1);
  var _dt2 = new Date(date2);
  var dt1 = _dt1.getTime();
  var dt2 = _dt2.getTime();
  return parseInt(Math.abs(dt1 - dt2) / 1000 / 60 / 60 / 24); //这里是计算天数,如果想获得周数则在该返回值上再除以7
}
</script>
<style scoped lang="scss">
.newbox {
  table {
    width: 100%;
    border-collapse: collapse;
    div {
      width: 100%;
    }
    tr {
      width: 100%;
      td {
        text-align: center;
        padding: 15px 10px;
        border: 1px solid #ebeef5;
      }
    }
  }
}
.user-p1 {
  .headerTop {
    margin-bottom: 30px;
    p {
      font-size: 16px;
      margin-bottom: 15px;
      color: #303133;
      span {
        padding: 10px;
      }
      .span1 {
        margin-left: 25px;
      }
    }
  }
  .user-pi-ul {
    margin: 0px auto 20px auto;
    li {
      float: left;
      width: 200px;
      margin-right: 20px;
    }
  }
}
.formX {
  .top {
    text-align: center;
  }
  ul {
    li {
      margin: 20px;
      h3 {
        color: #606266;
        font-weight: normal;
      }
      h5 {
        font-weight: normal;
        margin: 5px 0;
      }
      p {
        color: #999999;
        margin-bottom: 10px;
      }
    }
  }
}
.headerTop_ukl {
  /*border:1px solid #EDF1F7;*/
  padding: 5px 20px 10px 0px;
  min-width: 800px;
  width: 1000px;
  font-size: 14px;
  ul {
    li {
      float: left;
      margin-right: 50px;
      .p1 {
        color: #999999;
        padding-bottom: 5px;
        display: inline-block;
        img {
          display: inline-block;
          margin-right: 10px;
        }
      }
      .p3 {
        display: inline-block;
        padding-left: 10px;
        color: #666;
      }
    }
  }
}
.redspan {
  color: #fff;
  width: 30px;
  height: 25px;
  background: red;
  display: inline-block;
  line-height: 25px;
}
.grespan {
  color: #fff;
  width: 30px;
  height: 25px;
  background: #009900;
  display: inline-block;
  line-height: 25px;
}
.twospan {
  color: #fff;
  width: 30px;
  height: 25px;
  background: #fc9804;
  display: inline-block;
  line-height: 25px;
}
.thrspan {
  color: #7a6266;
  width: 30px;
  height: 25px;
  background: #ffff00;
  display: inline-block;
  line-height: 25px;
}
.fourspan {
  color: #fff;
  width: 30px;
  height: 25px;
  background: #92d050;
  display: inline-block;
  line-height: 25px;
}
.color1 {
  background: rgb(192, 0, 0);
}
.color2 {
  background: rgb(204, 117, 22);
}
.color3 {
  background: rgb(255, 255, 0);
}
.color4 {
  background: rgb(176, 217, 85);
}
.color5 {
  background: rgb(61, 147, 49);
}
.custorm-radiof {
  position: relative;
  display: inline-block;
  cursor: pointer;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid #7dba46;
  margin-right: 0.16rem;
}
.hidden {
  display: none;
}
.row {
  display: flex;
  align-items: baseline;
}
.title {
  font-size: 16px;
  color: #7dba46;
  text-align: center;
  font-weight: bolder;
  display: inline-block;
  margin: 15px 0;
}
.required {
  color: red;
}
.bbox {
  display: flex;
  margin: 10px;
  .label {
    padding-right: 60px;
  }
}
.h5 {
  text-align: center;
  font-size: 16px;
  font-weight: normal;
  margin: 15px;
}
.custorm-radiof.active::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin: auto;
  background-color: #7dba46;
}
.custorm-radiosf {
  position: relative;
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 1px solid #7dba46;
  margin-right: 0.16rem;
}

.custorm-radiosf.active::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  height: 6px;
  margin: auto;
  background-color: #7dba46;
}
.details {
  .label {
    cursor: pointer;
  }
}
.secContent {
  padding: 15px;
  .ptop {
    font-size: 16px;
    color: #333;
    text-indent: 2em;
  }
  .Tdiv {
    margin: 10px 0;
    .Ttop {
      border: 1px solid;
      .p1 {
        padding: 10px;
        color: #333;
      }
    }
  }
  .Tcon {
    display: flex;
    .Tleft {
      flex: 1;
      .Trow {
        display: flex;
        border-bottom: 1px solid;
        border-left: 1px solid;
        border-right: 1px solid;
        min-height: 1rem;
        p {
          flex: 1;
          display: flex;
          padding: 10px;
          align-items: center;
        }
        span {
          width: 30px;
          display: flex;
          align-items: center;
          justify-content: center;
          border-left: 1px solid;
          text-align: center;
          margin-left: auto;
        }
      }
    }
    .Tright {
      margin-left: auto;
      border-bottom: 1px solid;
      width: 50px;
      border-right: 1px solid;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  .colorCon {
    display: flex;
    flex-wrap: wrap;
    margin: 10px 0;
    display: -webkit-flex;
    span {
      flex: 1;
      text-align: center;
      color: #333;
      display: inline-block;
      padding: 10px 0;
    }
  }
}
</style>

